<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        ul {list-style: none;}
        .banner-view {
            overflow: hidden;
            margin-top: 20px;
            position: relative;
			border-radius: 4%;
        }
        .pic-wrap li {
            float: left;
        }
        .pic-wrap img {
            width: 100%;
        }
        .banner_dot {
            position: absolute;
            left: 50%;
            bottom: 10px;
            transform: translateX(-50%);
        }
        .banner_dot li {
            display: block;
            float: left;
            margin-right: 10px;
            background: #ccc;
            width: 10px;
            height: 10px;
            border-radius: 20px;
        }
        .banner_dot li:last-child{
            margin: 0;
        }
        .banner_dot .active {background: red;}

    </style>
</head>
<body>
    <div class="banner-view">
        <ul class="pic-wrap">
            <li><img src="../images/3dSwiper/3dBanner1.png"></li>
            <li><img src="../images/3dSwiper/3dBanner2.png"></li>
            <li><img src="../images/3dSwiper/3dBanner4.png"></li>
            <li><img src="../images/3dSwiper/3dBanner5.png"></li>
        </ul>
        <ul class="banner_dot"></ul>
    </div>

    <script>
        let view = document.querySelector('.banner-view'),
            picWrap = document.querySelector('.pic-wrap');
    

        banner('.banner-view','.pic-wrap');
        function banner(wrap,scroll) {
            let view = document.querySelector(wrap),
                picWrap = document.querySelector(scroll),
                viewWidth = view.offsetWidth,
                startPoint = 0, // 开始触摸点
                distanceX = 0, // 手指移动的距离
                timer = null,
                index = 1, // 位置索引
                last = picWrap.lastElementChild.cloneNode(true), // 克隆第一张
                first = picWrap.firstElementChild.cloneNode(true), // 克隆最后一张
                dotWrap = document.querySelector(`${wrap} .banner_dot`),
                lastPic,li;
                
            // 设置点
            let dot = '';
            for (let i=0; i<picWrap.childElementCount; i++) {
                dot += '<li></li>';
            }
            dotWrap.innerHTML = dot;
            let dots = document.querySelectorAll(`${wrap} .banner_dot > li`);
            dots[0].className = 'active';
            
            picWrap.insertBefore(last,picWrap.children[0]); 
            picWrap.appendChild(first);
            lastPic = picWrap.childElementCount - 1; 

            // 设置样式
            picWrap.style.width =  picWrap.childElementCount + '00%';
            picWrap.style.transform =  'translateX('+ -(100 / picWrap.childElementCount).toFixed(3) +'%)';
            li = picWrap.querySelectorAll('li');
            for (let i=0; i<li.length; i++) {
                li[i].style.width = (100 / picWrap.childElementCount).toFixed(3) +'%' ;
                
            }
            
            function transformX (offset) {
                picWrap.style.transform = 'translateX(' + offset +'px)';
            }
            function addTransition() {
                picWrap.style.transition = '.5s ease';
            }
            function removeTransition() {
                picWrap.style.transition = 'none';
            }
            function setDot(index) {
                for (let i=0; i<dots.length; i++) {
                    dots[i].className = '';
                }
                dots[index].className = 'active';
            }
            function movePic() {
                index++;
                addTransition();
                transformX(index * -viewWidth);
            }
            timer = setInterval(movePic,2000);

            view.addEventListener('touchstart',function(e){
                startPoint = e.changedTouches[0].clientX;
                clearInterval(timer);
            },false);
            view.addEventListener('touchmove',function(e){
                removeTransition();
                    let moveX = e.changedTouches[0].clientX;
                    distanceX = moveX - startPoint; // 得到滑动的距离

                    transformX(index * -viewWidth + distanceX);

            },false);
            view.addEventListener('touchend',function(){
                timer = setInterval(movePic,2000);
                
                // 判断左滑
                if (distanceX < 0) {
                    if (Math.abs(distanceX) >= viewWidth / 3) {
                        addTransition();
                        transformX(++index * -viewWidth);
                    } else {
                        addTransition();
                        transformX(index * -viewWidth);
                    }
                // 判断右滑
                } else if (distanceX > 0) {
                    if (Math.abs(distanceX) >= viewWidth / 3) { // 滑动的距离是否超过屏幕的3/1
                        addTransition();
                        transformX(--index * -viewWidth);
                    } else {
                        addTransition();
                        transformX(index * -viewWidth);
                    }
                }
            },false);
            picWrap.addEventListener('transitionend',function(){
                
                // 判读最后一张
                if (index >= lastPic) {
                    index = 1;
                    removeTransition();
                    transformX(index * -viewWidth);
                }
                // 判断第一张
                if (index <= 0) {
                    index = picWrap.childElementCount - 2; //回到最后一张
                    removeTransition();
                    transformX(index * -viewWidth);
                }
                setDot(index-1);

            },false);
        }
    </script>
</body>
</html>